<!-- 我的订单 -->
<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="headers">
			<view @click="back"><u-icon name="arrow-left" size="40rpx" color="black"></u-icon></view>
			<text>我的订单</text>
			<view class="right" v-if="current == 0" @click="invoiceList">开票</view>
			<view v-else style="width:102rpx;height:56rpx;"></view>
		</view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view class="flex_end headers_r">
            <view class="right" v-if="current == 0" @click="invoiceList">开票</view>
            <view v-else style="width:102rpx;height:56rpx;"></view>
        </view>
        <!-- #endif -->
		<z-paging ref="paging" v-model="dataList" @query="queryList" class='box' v-if="isshow">
			<view class="tabs" slot='top'>
				<u-tabs :list="tabList" @click="changeTab" :current="current"
				:scrollable="false" lineHeight="10" lineWidth="40"
					class='tabItem'></u-tabs>
			</view>
			<Item ref="item" v-if='current==0' :dataList="dataList" :current="current" @changeItem="changeItem" @orderItem='orderItem' />
			<Item ref="item" v-if='current==2' :dataList="dataLists" :current="current" @changeItem="changeItem" @orderItem='orderItem' />

			<view class="imgs" v-if="!isOpen && current == 0">
				<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/img19.png"></image>
				<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/img18.png"></image>
			</view>
			<view class="void" v-if="current == 0 && !isOpen">
				<view class="title" v-if="voidList.length > 0">
					超过3个月订单，不支持开票
					<text>（如有疑问，请联系平台）</text>
				</view>
				<Item ref="item" :dataList="voidList" :isOpen="isOpen" :right="true" />
			</view>
		</z-paging>
	</view>
</template>

<script>
import { myOrderList } from '@/apis/apis.js';
import Item from '../modules/order_item.vue';
export default {
	components: {
		Item
	},
	data() {
		return {
			chooseAll: [],
			tabList: [
				{
					name: '未开票订单',
					type: 0
				},
				{
					name: '已开票订单',
					type: 2
				}
			],
			current: 0,
			dataList: [], //增加选择以后的数据(实际使用的数据)
			voidList: [], //超过3个月的数据
			isChooseAll: false, //子组件是否主动全选
			choosed: 0, //已选中的条数
			isOpen: false, //是否开了发票
			invoiceFlag: 0, //	开票状态(0：未开票,2:已开票)
			orderIds: '', //	订单ids多个逗号隔开
			dataLists: [],
			isshow: false
		};
	},
	onShow() {
		this.isshow = true;
	},
	onHide() {
		this.isshow = false;
	},
	mounted() {
		// this.getList();
	},
	methods: {
		queryList(pageNo, pageSize) {
			myOrderList({
				invoiceFlag: this.current,
				orderIds: null,
				pageNum: pageNo,
				pageSize: pageSize
			}).then(res => {
				console.log(res);
				// this.dataList = res.data
				// this.$refs.paging.complete(this.dataList);
				//正常开票
				if (this.current == 0) {
					this.dataList = res.data.map(item => {
						if (item.invoiceAuth == 1) {
							return item;
						}
					});

					//超过三个月不能开票
					for (let item of res.data) {
						if (item.invoiceAuth == 0) {
							this.voidList.push(item);
						}
					}
				}
				if (this.current == 2) {
					this.dataLists = res.data;
				}
				this.$refs.paging.complete(res.data);
			});
		},
		back() {
			// uni.navigateBack();
			uni.switchTab({
				url: '/pages/minestart/mine'
			});
		},
		getList() {
			this.dataList = this.current == 0 ? this.test1 : this.test2;
			this.changeAll(false);
		},
		//修改全选/反选状态
		changeAll(flag) {
			this.dataList = this.dataList.map(item => {
				return {
					...item,
					flag: flag
				};
			});
		},
		changeTab(e) {
			console.log(e);
			this.current = e.type;
			this.queryList(1, 10);
		},
		//全选切换
		groupChange(e) {
			if (e.length === 0) this.$refs.item.clear();
			this.changeAll(e.length > 0);
			this.isChooseAll = e.length > 0;
			this.choosed = e.length > 0 ? this.dataList.length : 0;
		},
		//列表选择判断是否全选
		changeItem(e) {
			//修改全选以后不能单选BUG
			this.dataList.forEach((item, index) => {
				if (!e.includes(item.id)) item.flag = false;
			});
			//是否全选
			this.isChooseAll = e.length === this.dataList.length;
			this.choosed = e.length;
		},
		//去开票
		ToInvoice() {
			uni.navigateTo({
				url: './orders/invoice'
			});
		},
		//订单详情页
		orderItem(item) {
			// console.log(item)
			if (this.current == 2) {
				uni.navigateTo({
					url: './orders/orderDetail?id=' + item.id
				});
			}
		},
		//开票
		invoiceList() {
			this.isOpen = !this.isOpen;
			uni.navigateTo({
				url: './orders/invoices'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.box {
	background-color: #f8f8f8;
	min-height: 100vh;
}

.void {
	font-size: 30rpx;
	font-family: Source Han Sans CN;
	font-weight: 500;
	color: #303030;
	margin-top: 50rpx;
	padding: 0 30rpx;

	.title {
		margin-bottom: 12rpx;
	}

	text {
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #9b9b9b;
	}
}

.headers {
	position: fixed;
	background-color: #fff;
	box-sizing: border-box;
	z-index: 999;
	top: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 76rpx 30rpx 20rpx 30rpx;
	text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
	}
}
.headers_r {
	padding: 10rpx 30rpx;
	position: fixed;
	z-index: 999;
	width: 100vw;
	box-sizing: border-box;
}
.right {
	width: 102rpx;
	height: 56rpx;
	background: #194FC9;
	border-radius: 28rpx;
	font-size: 28rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	line-height: 56rpx;
}
.tabs {
	width: 90%;
	margin: 0 auto;
	/* #ifdef APP-PLUS */
	margin-top: 150rpx;
	/*  #endif  */
	/* #ifdef MP-WEIXIN */
	margin-top: 76rpx;
	/*  #endif  */
}

.imgs {
	margin-top: 68rpx;
	display: flex;
	align-items: center;
	padding-left: 74rpx;

	image {
		width: 220rpx;
		height: 148rpx;
		margin-right: 60rpx;
	}
}

.all {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	align-items: center;
	height: 110rpx;
	background: #ffffff;
	padding: 18rpx 48rpx 18rpx 36rpx;
	justify-content: space-between;
	box-shadow: 0px 0px 20rpx 20rpx rgba(80, 80, 80, 0.06);

	.left {
		display: flex;
		align-items: center;

		.text {
			margin-left: 36rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #393939;
		}
	}

	.btn {
		width: 220rpx;
		height: 76rpx;
		background: #194FC9;
		border-radius: 38rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		line-height: 76rpx;
	}
}
</style>
